﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
  <meta name="baidu-tc-cerfication" content="03f479fd75e1fb3379b85dc40e1443ff" />
	<title>Lyrics</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<link rel="stylesheet" href="http://0.lyrics.duapp.com/css/jquery-ui-1.10.3.custom.min.css" />
	<link rel="stylesheet" href="http://0.lyrics.duapp.com/css/audioplayer.css" />
	<link rel="stylesheet" href="http://0.lyrics.duapp.com/css/lyrics.css" />
	<script src="http://0.lyrics.duapp.com/js/jquery-1.10.2.js"></script>
	<script src="http://0.lyrics.duapp.com/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="http://0.lyrics.duapp.com/js/base.js"></script>
	<script src="http://0.lyrics.duapp.com/js/audioplayer.js"></script>	
	<script src="http://0.lyrics.duapp.com/js/lrc.js"></script>
	<script> 
	var jsonProxy = "http://0.lyrics.duapp.com";
	var apiKey = "Gxx7zQna7QAMcuuctwrD60G1";
	var g_type = 1;
	var g_score = 0;
	
	(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));

	
	$(function(){
		$( "#tabs" ).tabs();
	
		$("#search")
		  .button()
		  .click(function( event ) {
			event.preventDefault();
		  });
		  
		$("#search").click(function(event){
			var urlComponent = "http://mp3.baidu.com/dev/api/?tn=getinfo&ct=0&ie=utf-8&format=json&word=" + encodeURIComponent($("#song").val());
			log(urlComponent);
			
			var ajaxUrl = jsonProxy + "/getjson.php?url=" + encodeURIComponent(urlComponent) + "&tryTimes=3&jsoncallback=?";					
			log(ajaxUrl);		
			
			$.getJSON(ajaxUrl,
					function (response)
					{							
						if(response.length != 0)
						{
							status("Searching finished." + response.length + " songs found.Drag to see more.");
							fillList(response);						
						}
						else//if first api interface return nothing,try second api interface
						{
							var ajaxUrl = "http://sug.music.baidu.com/info/suggestion?word=" + encodeURIComponent($("#song").val()) + "&callback=?";
							log(ajaxUrl);
							$.getJSON(ajaxUrl,
								function (response2)
								{										
									for(var i = 0; i < response2.song.length; i++)
									{
										response2.song[i]["song"] = response2.song[i]["songname"];
										response2.song[i]["song_id"] = response2.song[i]["songid"];
										response2.song[i]["singer"] = response2.song[i]["artistname"];
									}
									status("Searching finished."+ response2.song.length + " found.");
									fillList(response2.song); 
								}
							);
						}
					}
				);
			status("Searching……", 1);
		});	
		
		$("#song").bind('keydown', function (e) {

            var key = e.which;

            if (key == 13) {

                $("#search").click();
            }
        });
						
		$(".songList").draggable({axis:"y",stop:function(event,ui){
			if(ui.position.top > 0)
			{
				ui.helper.animate({top:"0px"}, "fast");
			}
			else if(ui.position.top + ui.helper.height() + 30 < ui.helper.parent().height())
			{
				ui.helper.animate({top:(ui.helper.parent().height() - ui.helper.height() - 30) + "px"}, "fast");
			}
			
		}});
		
		enjoy("致青春", "王菲", 40153340, false);
		
		status("Search song or singer name,please……", 1);
		
		ajaxUrl = jsonProxy + "/getHotSongs.php?jsoncallback=?";
		$.getJSON(ajaxUrl,
			function (response)
			{							
				if(response.length != 0)
				{
					status("Searching finished." + response.length + " songs found.Drag to see more.");
					fillList(response);						
				}			
			}		
		);
		if(location.href.indexOf("http") >= 0)//判断页面是否在本地，暂不支持从网站上搜索歌曲
		{
			$(".searchBar").css("display","none");
		}
		
		var newsUrl = jsonProxy + "/news.php";
		var lrcUrl = jsonProxy + "/getdata.php?url=" + encodeURIComponent(newsUrl) + "&callback=?";		
		$.getJSON(lrcUrl,
			function(response)
			{											
				$("#tabs-3").html(decodeURIComponent(response.data));
		});
	});
	</script>
</head>

<body>
<div id="tabs">
	<ul class="control">
		<li><a href="#tabs-1">Search</a></li>
		<li><a href="#tabs-2">Music</a></li>	
		<li><a href="#tabs-3">News</a></li>
	</ul>
	<div id="tabs-1">
		<div class = "searchBar" >
			<span style="margin-right:10px;">Song:</span><input id = "song"  type="text" size="40" value="王菲" /><input id="search" type="button" value="Search" />
		</div>
		<div class="Listbox">
			<ul class="songList">
			</ul>
		</div>
	</div>
	<div id="tabs-2" style="padding:10px;">
		<div id="wrapper" >
		</div>
	</div>
	<div id="tabs-3" style="padding:10px;">

	</div>	
	<div  class="ui-widget" id="statusBar">
		<div class="ui-state-highlight ui-corner-all" style="margin-top:0px; padding: 0 .7em;font-size:13px;">
			<p>	
				<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<span id="status">Loading……</span>
			</p>
		</div>
	</div>
</div>
<div id = "log">
	
</div>
</body>

</html>